<template>
  <div class="shoop">
    <van-nav-bar title="购物车" left-text left-arrow flexed>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <!-- 购物车是空状态的时候 -->
    <div v-if="!shoopData.length">
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="您的购物车是空的哦!"
      />
      <div class="suib">
        <van-button type="danger">随便看看</van-button>
        <van-button type="default">去登陆</van-button>
      </div>
    </div>

    <!-- 内容 -->
    <div class="wp">
      <div class="shop" v-for="(item,index) in shoopData" :key="index">
        <!-- <van-checkbox v-model="item.is" checked-color="#ea4141" >品牌直营</van-checkbox> -->
        <div class="back">
          <div class="xianshi">
            <div class="miaos">限时秒杀</div>
            <div style="margin-left:0.1rem">距离活动结束还剩24小时</div>
          </div>
        </div>
        <div class="wupin">
          <div class="zhengt">
            <van-checkbox v-model="item.is" checked-color="#ea4141" @click="single(item)">
              <van-image width="100" height="100" :src="item.imgurl" />
            </van-checkbox>
            <div class="miaoshu">
              <div class="caip">{{item.title}}</div>
              <div class="money-num">{{item.bm}}</div>
              <div class="tuih">支持七天放心退 | 支持换货</div>
              <div class="jiag">
                <div class="onejia">￥{{item.newPrice}}</div>
                <div>
                  <van-stepper v-model="item.num" @change="quantities($event,index)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 删除 / 清除 -->
      <div class="delete" v-if="shoopData.length">
        <div class="delete-wp">
          <van-icon name="delete" color="#ea4141" />
          <div class="sp" @click="remove">删除选择商品</div>
        </div>
        <div class="delete-wp">
          <van-icon name="delete" color="#ea4141" />
          <div class="sp">清除无效商品</div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="bottom" v-if="shoopData.length">
      <van-submit-bar
        button-type="square"
        button-color="#ea4141"
        :price="total"
        button-text="结算(1)"
        label="总计(不含税)："
        :decimal-length="0"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allchecked" checked-color="#ea4141" @change="all">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { gwlocal, jzlocal } from "../utils/localStorage";
export default {
  name: "shoopcar",
  layout: true,
  data() {
    return {
      checked: true,
      allchecked: false,
      value: 1,
      shoopData: [],
      total: 0,
    };
  },
  methods: {
    ...mapActions("home", ["getShoop"]),
    // 结算
    onSubmit() {
      let arr = [];
      this.shoopData.forEach((v, i) => {
        if (v.is) {
          arr.push({
            id: v.id,
            num: v.num,
            bm: v.bm,
          });
        }
      });
      if (!arr.length) {
        return;
      }
      jzlocal.set(arr);
      this.$router.push("/groupon");
    },
    // 单选
    single(item) {
      if (this.shoopData.every((v) => v.is)) {
        this.allchecked = true;
      } else {
        this.allchecked = false;
      }
      this.alltotal();
    },
    // 全选
    all() {
      this.shoopData.map((v) => {
        this.$set(v, "is", this.allchecked);
        return (v.is = this.allchecked);
      });
      this.alltotal();
    },
    // 计算选中商品总价
    alltotal() {
      let num = 0;
      this.shoopData.reduce((v, i) => {
        if (i.is) {
          num += i.newPrice * i.num;
        }
      }, 0);
      this.total = num * 100;
    },
    // 改变商品数量
    quantities(e, index) {
      let arr = gwlocal.get();
      arr[index].num = e;
      gwlocal.set(arr);
      this.alltotal();
    },
    // 删除选中商品
    remove() {
      let arr = gwlocal.get();
      this.shoopData.forEach((v, i) => {
        if (v.is) {
          arr.splice(i, 1);
          this.shoopData.splice(i, 1);
        }
      });
      gwlocal.set(arr);
      this.total = 0;
    },
  },
  async mounted() {
    this.shoopData = gwlocal.get();
    // 获取商品
    let ids = [];
    this.shoopData.forEach((v) => {
      if (!ids.includes(v.id)) {
        ids.push(v.id);
      }
    });

    let r = await this.getShoop({ ids: ids.join(",") });
    this.shoopData = this.shoopData.map((v) => {
      let item = r.find((r) => r.id == v.id);
      v = { ...v, ...item };
      return v;
    });
  },
};
</script>

<style scoped>
.shoop {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 100px;
  overflow: hidden;
  overflow-y: auto;
}
.van-nav-bar.van-hairline--bottom {
  background-color: #ea4141;
}

.van-nav-bar >>> .van-icon {
  color: #fff;
}

.van-nav-bar >>> .van-nav-bar__title.van-ellipsis {
  color: #fff;
}

.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}

.van-submit-bar__bar {
  padding: 0 0 0 0.16rem;
}

span.van-submit-bar__price.van-submit-bar__price--integer {
  font-size: 0.3rem;
}

.suib {
  display: flex;
  justify-content: center;
}

.wp {
  /* position: relative; */
  background: #f5f5f5;
  height: 20rem;
  border: 1px solid #f5f5f5;
}

.van-stepper {
  margin-right: 0.1rem;
}

.shop {
  margin: 0.2rem 0.11rem;
  padding: 0.15rem;
  height: 3.5rem;
  background: #fff;
  /* position: absolute; */
}

.delete {
  height: 1rem;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.25rem;
  align-items: center;
}

.delete-wp {
  display: flex;
}

i.van-icon.van-icon-delete {
  margin-top: 0.05rem;
}

.sp {
  margin-left: 0.1rem;
}

.xianshi {
  font-size: 0.2rem;
  color: #ea4141;
  display: flex;
  margin: 0.3rem 0 0.2rem 0.5rem;
  padding: 0.1rem;
}

.back {
  width: 100%;
  background-color: #fff6fa;
}

.miaos {
  border: 1px solid;
  padding: 0.005rem 0.05rem;
}

.shop >>> span.van-checkbox__label {
  font-size: 0.22rem;
}

.zhengt {
  display: flex;
  justify-content: space-between;
}

.caip {
  font-size: 0.23rem;
}

.miaoshu {
  width: 3.6rem;
  margin-left: 0.1rem;
}

.money-num {
  font-size: 0.2rem;
  color: #999;
  padding: 0.05rem;
}

.tuih {
  color: #ff6f3b;
  font-size: 0.2rem;
  padding: 0.05rem;
}

.jiag {
  display: flex;
  justify-content: space-between;
  /* margin-top: 0.1rem; */
}

.onejia {
  margin-top: 0.1rem;
}

.bottom >>> .van-submit-bar {
  bottom: 0.86rem;
}

.suib {
  display: flex;
  justify-content: space-evenly;
}
</style>